.widget-loader{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

/*.report.widget{
  height: 480px;
}*/

.mat-card-content{
  margin:0;
  height:100%;
}

.mat-icon.multipath-icon{
  color: var(--fg2);
  position: relative;
  top: 3px;
}

.card-title-text{
  display:table;
  font-size:1.42em;
}
.card-title-items{
  display:table-row;
}
.card-title-items div{
  display:table-cell;
  vertical-align:middle;
}

.legend {
  display:table; 
}

.legend-group-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 48px;
}

table.legend-table {
  display: table;
  width: 400px;
  margin-right:36px;
}

tr.header th{
  text-transform: capitalize;
  border-bottom:solid 1px rgba(255,255,255,0.25);
}

  tr.legend-group:nth-child(even) {
    background-color:rgba(0,0,0,0.1);
}

tr.header th, td.legend-label {
  text-align: left;
}

tr.legend-group {
  display: table-row;
}

td.legend-label:nth-child(1) {
  width:40%;
  padding-right: 0;
}

td.legend-label  {
  display: table-cell;
  font-weight:500;
  padding-right: 12px;
  padding: 4px 12px 4px 0px;
}

.legend-label div {
  display:inline-block;
}

.legend .swatch{
  border-radius:50%;
  width:12px;
  height:12px;
  margin-right:8px;
}

span.tooltip-value{
  color: var(--fg2);
  font-weight: 700;
}

.legend .tooltip-wrapper{
  padding-left:8px;
  height:20px;
}

.legend-timestamp{
  height:20px;
}

.legend-item{
  padding:4px 0;
  text-align:right;
  text-transform:capitalize;
  font-weight:400;
}

.disk-grid-header{
  text-align: left;
  margin-left: 16px;
}

.disk-grid-header,
.disk-grid-controls{
  width: 100%;
  font-weight: 500;
}

.disk-grid-controls{
  text-align:right;
}

.disk-grid-controls button{
  margin-top: -7px;
}

/*.disk-grid-controls button.previous{
  right:56px;
}

.disk-grid-controls button.next{
  right:16px;
}*/

.disk-grid-control{
  border-radius: 2px;
  border: solid 1px rgba(255,255,255,0.15);
  margin: 0 4px;
  cursor: pointer;
  background-color: rgba(255,255,255,0.1);
  padding: 2px 5px 1px;
  font-size: 90%;
}

.disk-tile{
  /*background-color:rgba(0,0,0,0.15);*/
  /*background-color:rgba(0, 208, 214,0.5);*/
  background-color:var(--bg1);
}

.disk-name{
  font-weight:bold;
  margin: 0 4px 4px;
  font-size: 16px;
  width:100%;
}

.high-density,
.diskset .mat-grid-list{
  /*background-color:rgba(0,0,0,0.8);*/
}

.high-density .disk-name{
  /*font-size: 12px;*/
  font-size: 60%;
  position: absolute;
  bottom: -5px;
  margin:0;
}

.disk-icon{
  font-size: 18px;
  margin: 4px 0 2px;
}

.high-density .disk-icon{
  /*display:none;*/
  width:100%;
  position:absolute;
  font-size:160%;
}

.disk-icon,
.disk-name{
  text-align:center;
  color:#fff;
  color:var(--fg2);
}

.disk-tile,
.disk-icon,
.disk-name{
  cursor:pointer;
}

.disk-details{
  width:100%;
  /*height: 240px;
  background: rgba(0,0,0,0.05);
  border: solid 1px rgba(0,0,0,0.1);
  padding: 8px;*/
}

.disk-detail-header{
  text-align:left;
}

span.disk-detail-title,
.disk-detail p.label{
  color:#666;
  color:var(--fg1);
  font-size: 75%;
  font-weight: normal;
  opacity: 0.5;
  margin-bottom:-4px;
}

p.value{
  font-size: 100%;
  font-weight: 400;
}

span.disk-detail-title {
  /*font-size: 1.25em;*/
  text-align: left;
}

span.disk-detail-subtitle {
  text-align: left;
  font-size: 0.85em;
  opacity: 0.65;
}

.pool-status{
  cursor:default;
  text-align:right;
  position: absolute;
  right: 16px;
}

.pool-status mat-icon.mat-icon{
  position: relative;
  bottom: -6px;
  margin:-4px 0 0 4px;
}

.disk-detail-section {
  display:table;
  width: 100%;
  text-align: left;
  margin: 8px 8px 4px 16px;
}
.disk-detail-item{
  display:table-row;
}
.disk-detail-item > div{
  display:table-cell;
}

.disk-detail-temps-bar{
  padding-bottom: 5px;
  border-bottom: solid 3px;
  border-image: linear-gradient(to right,lightseagreen,yellow 45%,red 55%)15;
}

.disk-detail-temps-bar .mat-progress-bar-buffer{
  opacity:0 !important;
}

.disk-detail-temp{
  max-height:24px;
}
.disk-detail-temp-label{
  max-height:65px;
}
.disk-detail-temp,
.disk-detail-temp-label{
  max-width:calc(100% - 32px);
  margin: 0 auto;
}
.disk-detail-temp-label{
  text-align:left;
}

.disk-detail-temp-label div.label{
  font-size:75%;
}

.disk-detail-temp-label span.value{
  font-size: 2.75em;
  line-height: 1em;
  /*margin-left: 12px;*/
}
.disk-detail-temp-label.hot span.value{
  color:#c00;
}
.disk-detail-temp-label.hot .mat-progress-bar-element{
  border:solid 7px #c00;
}

.disk-detail-temp-label span.temp-units{
  font-weight:500;
}

.temps-bar-label{
  font-size:75%;
}
.temps-bar-label.freeze{
  text-align:left;
}
.temps-bar-label.boil{
  text-align:right;
}

/* Disk Sets */
.diskset-wrapper-mask{
  width:100%;
  overflow:hidden;
}

.diskset-wrapper{
  border-left:solid 1px rgba(0,0,0,0.1);
  border-right:solid 1px rgba(0,0,0,0.1);
}

.diskset{
  float:left;
  width:100%;
}

.disk-array-ui{
  height:100%;
}

.card-bg-wrapper{
  min-height:100%;
  /*background-color:var(--primary);
  color:var(--primary-txt);*/
  /*background-color:#333;
  color:#fff;*/
}

.zero-state h4 {
  margin:8px 0 0 8px;
}

div.line-chart-tools-wrapper{
  text-align:right;
  margin-top:-8px;
}

div.line-chart-tools-wrapper button{
  display:inline-block;
  width:64px
}

div.line-chart-tools{
  /*width:64px;
  min-height:100%;
  margin-left:16px;*/
  text-align:right;
  /*background-color:var(--primary);
  color:var(--primary-txt);*/
}

div.line-chart-tools ul{
  list-style-type:none;
}

div.line-chart-tools li{}

div.line-chart-tools .tool-icon{
  width:64px; 
  font-size:18px;
}

/* Mobile */
.disk-array-ui.column{
  width:100%;
}
/*.disk-array-ui.column .disk-name{
  font-size:14px;
}
.disk-array-ui.column .disk-icon{
  font-size:16px;
}
.disk-array-ui.column .disk-details{
height:calc(100% - 48px);
}*/

  /* IMPORTED */
  /*.card-bg-wrapper,
  .chart-wrapper{
    height:calc(100% - 64px);
  }*/
  .chart-wrapper{
    height:200px;
  }

  .card-bg-wrapper{
    /*width:40%;*/
    /*border-right:solid 1px var(--bg1);
    background-color:var(--primary);
    color:var(--primary-txt);*/
  }

  .card-bg{
    width:100%;
    height:100%;
    background-size:contain;
    background-position:50%;
    /*background-color:rgba(0,0,0,0.15);*/
    background-repeat:no-repeat;
  }

  .report .card-bg-wrapper h3{
    text-align:left;
    margin:16px;
  }

  /*.logo-bg{
  padding: 24px;
  border: solid #dedede 8px;
  border-color:rgba(128,128,128,0.5);
  box-shadow: 0 3px 5px rgba(0,0,0,0.55);
  border-radius: 50%;
  top: 28%;
  left: 21%;
  display: table;
  position: absolute;
  background-color: #999;
  }*/

  .logo-bg .os-logo{
    /*padding: 10px 10px 4px 14px;
    width: 100px;
    height: 100px;*/
  width:50%;
  margin-top:16%;
}

.xs .card-bg-wrapper{
  width:100%
}

.xs .card-bg{
  background-size:contain;
}

.data-container > div{
  text-align: left;
  margin: 8px 16px;
}

.data-container h3{
  font-weight:400;
}

.data-inline{
  display:inline-block;
  margin-right:16px;
  width:calc(50% - 32px);
}

.build-date{
  font-style:italic;
  opacity:0.5;
  font-size:85%;
}


/* SUMMARY (LEFT SIDE) */
.pool-summary{
  height:55%;
  padding:8px;
  width:100%;
  display:table;
  /*color:#fff;*/
}

.pool-data{
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}

.pool-data div.inner span.value{
  font-size:300%;
}

.title-wrapper{
  /*background-color:rgba(0,0,0,0.5);
  color:#fff;*/
  background-color:rgba(0,0,0,0.1);
  height:45%;
  text-align: left;
  padding: 16px; 
}

.title-wrapper .title{
  font-size:150%;
}

.title-wrapper .subtitle{
  font-size:80%;
}

.reports-btn{
  position:absolute;
  right:16px;
  bottom:16px;
  font-weight:500;
  text-transform:capitalize;
}

/* DETAILS */
.label.bold strong{
  font-size:75%;
  font-weight:normal;
  opacity:0.5;
}
p.value{
  font-size:100%;
  font-weight:400;
}

.xs-footer{
  display:none;
}

/* NARROW SCREENS */
.xs.widget.double-height{
  width:100%;
}

.xs .card-bg-wrapper{
  min-height:40%;
}
.xs .pool-summary{
  height:100%;
}

.xs .title-wrapper{
  position: absolute;
  width: 100%;
  /*bottom: -100%;*/
  height:72px;
  top:0;
}

.xs p.pool-status{
  top:88px;
}

.xs .platform-logo img{
  width: 100px;
  position: absolute;
  bottom: 32px;
}

.xs .subtitle{
  font-size: 80%;
  position: absolute;
  bottom: 16px;
}
.xs .data-container{
  margin-top:16px;
}

.xs .xs-footer{
  display:block;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  max-height: 68px !important;
  color:#fff;
}

.xs .title-wrapper .reports-btn{
  display:none;
}

.legend-group {
  /*margin-right: 20px;*/
  /*max-width: calc(50% - 16px) !important;*/
  /*background-color: rgba(0,0,0,0.1);*/
  /*padding: 8px;*/
  margin: 0 0 0 4px;
  border: solid 1px rgba(0,0,0,0);
  border-radius:4px;
}

h3 {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
}

/* Children get the padding so dividers fit the full width of card */
.report .mat-card{
  padding-left:0;
  padding-right:0;
}

.report .mat-card-footer,
.report .mat-toolbar-row,
.report .legend-wrapper,
.report .chart-wrapper{
  padding-left:32px;
  padding-right:32px;
  margin:0;
}

.report .legend-wrapper.timestamps .legend-timestamp{
  display: inline-block;
  width: 50%;
  margin:16px 0 0;
}

.report .legend-wrapper.timestamps .legend-timestamp:nth-child(1){
  padding-left: 48px;
}

.report .legend-wrapper.timestamps .legend-timestamp:nth-child(2){
  text-align: right;
}

.report .mat-card-footer{
  width:100%;
}

.report .mat-toolbar-row{
}

.report .mat-card.zero-state{
  min-height:325px;
  /*background-color:rgba(0,0,0,0.0);*/
  position:relative;
}

.report .mat-card.zero-state .mat-icon{
  width:auto;
  height:80px;
  color: var(--fg2);
  opacity:0.1;
}

